<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>JPetStore</title>
    <link rel="StyleSheet" href="css/main.css" type="text/css" media="screen" />
    <style>
        @font-face {
            font-family: 'huayuan';
            src: url("font/花园肉丸.ttf");
        }

        .top {
            z-index: 3;
            height: 70px;
            top: 0px;
            left: 0;
            position: fixed;
            padding-top: 20px;
            background-color: transparent;
        }

        /* 删除原本超链接样式 */
        a {
            text-decoration: none;
        }

        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }


        .trCorner li {
            color: rgb(190, 158, 111);
        }

        /* 顶部导航颜色渐变 */
        @keyframes color_turn {
            from {
                background-color: #e9e4f0bb;
                color: silver;
            }

            to {
                background-color: #f4bd86;
                color: beige;
            }
        }

        .change_color {
            animation: color_turn 500ms ease 1 forwards;
        }

        /*搜索框渐变*/
        @keyframes color_turn2 {
            from {
                background-color: rgba(255, 255, 255, 0.8);
                color: black;
            }

            to {
                background-color: rgba(255, 255, 255, 1.0);
                color: black;
            }
        }

        .change_color2 {
            animation: color_turn2 500ms ease 1 forwards;
        }

        /* 左上角logo微调 */
        .tlCorner {
            opacity: 95%;
            height: 100px;
        }

        /* 搜索栏 */
        .searchBar {
            position: absolute;
            top: 26px;
            left: 30vw;
        }

        #searchInput {
            width: 408px;
            height: 28px;
            margin: 0 auto;
            border-radius: 40px;
            border: none;
            padding-left: 10px;
        }

        #searchSubmit {
            height: 27px;
            width: 27px;
            margin: 0 auto;
            background-image: url(img/searchIcon.png);
            background-repeat: no-repeat;
            background-size: contain;
            border: none;
            background-color:transparent;
            position: relative;
            top: 0px;
        }

        #auto{
            background-color: rgba(255, 255, 255, 1);
            font-size: 12px;
            margin-top: 10px;
        }

        #auto_out{
            padding-left: 6px;
            padding-top: 10px;
            padding-bottom: 10px;
            font-family: cm;
            border-bottom: 2px solid gray;

        }

        #auto_out h2{
            margin: 0px;
        }
    </style>
</head>
<body>
<!-- 页面顶部 -->
<div class="top">
    <a href="mainForm">
        <div class="tlCorner" ></div>
    </a>

    <!-- 搜索框 -->

    <div class="searchBar" id="Search">
        <form action="search" method="post">
            <input type="text" id="searchInput" name="keyword" size="14" placeholder="搜索您喜欢的宠物">
            <button type="submit" id="searchSubmit"></button>
            <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <div id="auto"></div>
            <script type="text/javascript" src="js/searchProduct.js"></script>
        </form>
    </div>

    <div class="trCorner">
        <ul>
            <li th:if="${session.loginUser == null}"><a href="signOnForm">用户登录</a></li>
            <li th:if="${session.loginUser != null}"><a href="signOut">退出</a></li>
            <li><a href="cartForm">购物车</a></li>
            <li>店铺介绍</li>
            <li><a href="/help.html">帮助</a></li>
            <li>联系我们</li>
            <a id="userInfo" th:if="${session.loginUser}!=null" href="myAccountForm"></a>
            <a id="userInfo" th:if="${session.loginUser}==null" href="signOnForm"></a>
        </ul>
    </div>
</div>
</body>

<script type="text/javascript">
    // 导航栏滚动变色显示
    function scroll() {
        var top = $(".PetDisplay").offset().top;//获取宠物展示位置距顶部的高度
        var scrollTop = $(window).scrollTop();//获取当前窗口距顶部的高度
        if (scrollTop > top) {
            $('.top').addClass('change_color');
            $('.trCorner li').addClass('change_color');
            $('#auto').addClass('change_color2');

        } else if (scrollTop <= top - 50) {
            $('.top').removeClass('change_color');
            $('.trCorner li').removeClass('change_color');
            $('#auto').removeClass('change_color2');

        }
    }

    $(window).on('scroll', function () {
        scroll()
    });

</script>